<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>展览之家商城</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .el-header a{
            color: #666;
            text-decoration: none;
        }
        /*.el-menu.el-menu--horizontal{
            border-bottom: 0;
        }*/
        .el-table .el-table__cell{
            padding: 0;
        }
        .el-header a{
            color: black;
            text-decoration: none;
        }
        /*.el-menu.el-menu--horizontal{
            border-bottom: 0;
        }*/
        #pp{
            width: 250px;
        }
        .el-table .cell{
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <div style="width: 1200px;margin: 0 auto">
                <img style="vertical-align: middle" src="img/logo.jpg" width="80">
                <a href="">首页</a><el-divider direction="vertical"></el-divider>
                <a href="">热点资讯</a><el-divider direction="vertical"></el-divider>
                <a href="">商家入驻</a><el-divider direction="vertical"></el-divider>
                <a href="">购物车</a><el-divider direction="vertical"></el-divider>
                <a href="">我的订单</a><el-divider direction="vertical"></el-divider>
                <a href="">帮助</a>
                <div style="float: right;position: relative;top: 10px">
                    <el-input type="text" style="margin-left: -22px">
                        <!--这是一个搜索按钮-->

                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
            </div>
        </el-header>

        <el-main style="width: 1200px;margin: 0 auto">

                <el-row gutter="20">
                    <el-col span="18">
                        <!--这是走马灯-->
                        <el-carousel trigger="click" height="300px">
                            <el-carousel-item v-for="b in bannerArr">
                                <img :src="b.url" width="100%">
                            </el-carousel-item>
                        </el-carousel>
                    </el-col>
                    <el-col span="6">
                        <!--这是排行-->
                        <el-card>
                            <h3>
                                <i style="font-weight: bold" class="el-icon-trophy"> 销量最高</i>
                            </h3>
                            <el-divider></el-divider>
                            <el-table :data="topArr">
                                <el-table-column type="index" label="排名"></el-table-column>
                                <el-table-column prop="title" label="商品标题"></el-table-column>
                                <el-table-column prop="saleCount" label="商品销量"></el-table-column>
                            </el-table>
                        </el-card>
                    </el-col>

                    <div>热门商品</div>

                    <el-col span="6" v-for="p in productArr">
                        <el-card>
                            <a href="particulars.html"> <!--'/detail.html?id='+p.id-->
                                <img id="pp" :src="p.url" width="100%" height="233">
                            </a>
                            <p style="font-size: 14px;height: 30px">
                                <a style="font-size: 18px" :href="'/detail.html?id='+p.id">
                                    {{p.title}}
                                </a>
                            </p>
                            <p>
                                <b>￥{{p.price}}</b> <s>{{p.oldPrice}}</s>
                                <span style="float: right">已售:{{p.saleCount}}件</span><br>
                                <span style="float: right">{{p.num}}人已付款</span>
                            </p>
                        </el-card>
                    </el-col>
                </el-row>
        </el-main>

        <el-footer>
            <div class="footer-wrapper">
                <div class="footer-nav">
                    <el-menu mode="horizontal">
                        <el-menu-item index="1">关于我们</el-menu-item>
                        <el-menu-item index="2">联系我们</el-menu-item>
                        <el-menu-item index="3">隐私政策</el-menu-item>
                        <el-menu-item index="4">服务条款</el-menu-item>
                    </el-menu>
                </div>
            </div>
        </el-footer>
    </el-container>
</div>
</body>
<!--引入axios和vue框架文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                bannerArr:[{url:"img/s1.jpg"},
                    {url:"img/jk1.jpg"},
                    {url:"img/n1.jpg"},
                    {url:"img/d1.jpg"},],
                topArr:[{title:"情趣丝袜",saleCount:2313},
                    {title:"【佟丽娅同款】情趣丝袜",saleCount:1987},
                    {title:"jk套装",saleCount:1535},
                    {title:"jk套装 贺岁系列",saleCount:1024},
                    {title:"牛仔裤",saleCount:985},
                    {title:"短袖",saleCount:564}],
                productArr:[{title:"情趣丝袜",price:233,oldPrice:598,url:"img/s1.jpg",saleCount:2342,num:23},
                    {title:"情趣丝袜",price:233,oldPrice:598,url:"img/s2.jpg",saleCount:2342,num:53},
                    {title:"情趣丝袜",price:233,oldPrice:598,url:"img/s3.jpg",saleCount:2342,num:33},
                    {title:"【佟丽娅同款】情趣丝袜",price:233,oldPrice:598,url:"img/s4.jpg",saleCount:2342,num:83},
                    {title:"情趣丝袜",price:233,oldPrice:598,url:"img/s5.jpg",saleCount:2342,num:28},
                    {title:"jk套装",price:233,oldPrice:598,url:"img/jk2.jpg",saleCount:2342,num:24},
                    {title:"jk套装",price:233,oldPrice:598,url:"img/jk3.jpg",saleCount:2342,num:255},
                    {title:"jk套装 贺岁系列",price:233,oldPrice:598,url:"img/jk4.jpg",saleCount:2342,num:93},
                    {title:"jk套装",price:233,oldPrice:598,url:"img/jk5.jpg",saleCount:2342,num:63},
                    {title:"BEASTER 牛仔裤",price:233,oldPrice:598,url:"img/n1.jpg",saleCount:2342,num:83},
                    {title:"牛仔裤",price:233,oldPrice:598,url:"img/n2.jpg",saleCount:2342,num:29},
                    {title:"牛仔裤",price:233,oldPrice:598,url:"img/n3.jpg",saleCount:2342,num:99},
                    {title:"短袖",price:233,oldPrice:598,url:"img/d1.jpg",saleCount:2342,num:59},
                    {title:"短袖",price:233,oldPrice:598,url:"img/d2.jpg",saleCount:2342,num:44},
                    {title:"短袖",price:233,oldPrice:598,url:"img/d3.jpg",saleCount:2342,num:68},
                    {title:"短袖",price:233,oldPrice:598,url:"img/d4.jpg",saleCount:2342,num:78}],

            }
        },
        methods:{

        }
    })
</script>
</html>